<template>
	<view class="box">
		<view class="selectMember">
			<view class="memberBox">
				<view class="member" @click="editId ? false : memberdialog = true">
					<image src="../../../static/img/quickly/information/add@2x.png"></image>
					<text>{{userName || '选择会员'}}</text>
				</view>
				<!-- <view class="member">
					<view @click="editId ? false : memberdialog = true">{{userName || '会员：'}}</view>
					<view style="position: relative;">{{start_date || '日期：'}}
						<picker mode="date" :start="start" :end="end"  @change="bindDateChange" v-if="selected != 1" style="position: absolute;left:0;top: 0;width: 100%;height: 100%;">
							<view class="date">{{start_date}}</view>
						</picker> 
					</view>
				</view> -->
				<view class="toSend" @click="seveAdd(2)">确认存档</view>
			</view>
		</view>
		<view class="mainContent">
			<view class="twoSecond">
				<view class="left">
					<view><text>体检机构：</text><input type="text" v-model="medicalName"></view>
					<p class="flex">体检时间：
						<picker mode="date" :start="start" :end="end"  @change="bindDateChange">
							<view class="date">{{medicalTime || '选择体检时间'}}</view>
						</picker> 
					</p>
				</view>
			</view>
			<view class="uploadBox" @click="chooseFile">
				<image mode="widthFix" src="@/static/img/physicalExamination/chooseFile.png"></image>
				<text>{{tempFiles || '选择文件'}}</text>
				
			</view>
			<member :dialog.sync="memberdialog"  @hidedialog="hidememberdialog" @chooseUser="chooseUser"></member>
			<u-modal v-model="showModal" :show-cancel-button="true" @confirm="Modalconfirm" :content="showContent"></u-modal>
		</view>
	</view>
</template>

<script>
	import http from '@/common/http/interface.js'
	import member from '@/components/selectMember/selectMember.vue'
	export default {
		components: {
			member
		},
		data (){
			const currentDate = this.getDate({
				format: true
			})
			return {
				start: '',
				end: currentDate,
				medicalTime:'',
				userName:'',
				imgUrls: [],
				action: http.config.baseUrl+'/File/multipleFiles',
				header:{
					"Access-Token": localStorage.token
				},
				editId:'',
				memberdialog: false,
				showModal:false,
				showContent:'',
				isChoose: true,
				medicalName:'',
				tempFiles:'',
				uploadFile:''
			}
		},
		onLoad() {
			
		},
		methods:{
			chooseFile(){
				const _this = this;
				uni.chooseFile({
				  count: 1, //默认100
				  extension:['.pdf'],
				    success: function (res) {
						const tempFilePaths = res.tempFilePaths;
						_this.tempFiles = res.tempFiles[0].name
						uni.uploadFile({
							url: http.config.baseUrl+'/File/multipleFiles', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'type': '21'
							},
							header:{
								"Access-Token": localStorage.token
							},
							success: (uploadFileRes) => {
								_this.uploadFile = JSON.parse(uploadFileRes.data).result[0]
							}
						});
				    }
				});
			},
			// 获取当前时间
			getDate(type) {
			   const date = new Date();
			   let year = date.getFullYear();
			   let month = date.getMonth() + 1;
			   let day = date.getDate();
			  
			   if (type === 'start') {
				year = year - 60;
			   } else if (type === 'end') {
				year = year + 2;
			   }
			   month = month > 9 ? month : '0' + month;;
			   day = day > 9 ? day : '0' + day;
			   return `${year}-${month}-${day}`;
			},
			// 日期
			bindDateChange(e) {  //日期选择
				this.medicalTime = e.target.value;
			},
			hidememberdialog(){
				this.memberdialog = false
			},
			// 选择会员
			chooseUser(e){
				console.log(e)
				this.userId = e.userId;
				this.userName = e.userName;
			},
			submit(e){
				const _this = this;
				const data = {
					id:_this.editId,
					medicalName: _this.medicalName,
					medicalTime: _this.medicalTime,
					imgUrls: [_this.uploadFile] ,
					status:e,
					type:2,
					userId: _this.userId
				}
				if(!_this.editId){
					_this.$api.Medicalinsert(data).then((res)=>{
						if(res.data.returnCode == 200){
							uni.showToast({title:'保存成功',icon:'none'})
							setTimeout(()=>{
								uni.navigateTo({
									url:'/pages/quickly/medicalReport/list'
								})
							},1000)
						}else{
							uni.showToast({title:res.data.message,icon:'none'})
						}
					})
				}
			},
			seveAdd(e){
				const _this = this;
				if(!_this.userId){
					uni.showToast({
						title:'请选择会员！',
						icon:'none'
					})
					return;
				}
				if(!_this.medicalName){
					uni.showToast({
						title:'请填写体检机构！',
						icon:'none'
					})
					return;
				}
				if(!_this.medicalTime){
					uni.showToast({
						title:'请选择体检时间！',
						icon:'none'
					})
					return;
				}
				if(!_this.uploadFile){
					uni.showToast({
						title:'请先上传PDF文件！',
						icon:'none'
					})
					return;
				}
				if(e==2){
					this.showModal = true
					this.showContent = '确认信息无误，签名并发送给用户存入健康档案，发送后该信息将不可修改。'
					return;
				}
				this.submit(e)
			},
			Modalconfirm(){
				this.submit(2)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/quickly/medicalReport/entryMedical.scss';
	.box {
		background-color: #FFFFFF;
	}
	.mainContent {
		.twoSecond {
			width: 750upx;
			height: 176upx;
			background: #FFFFFF;
			box-shadow: 0upx 4upx 30upx 0upx rgba(222, 222, 222, 0.3);
			display: flex;
			position: fixed;
			top: 109px;
			align-items: center;
			padding: 0 24upx;
			box-sizing: border-box;
			z-index: 100;
			.left {
				flex: 1;
				width: 702upx;
				view {
					display: flex;
					align-items: center;
					text {
						color: #333333;
						font-size: 30upx;
					}				
					input {
						flex: 1;
						height: 46upx;
						padding-left: 10upx;
						border: 1upx solid #E4E4E4;
						border-radius: 6upx;
						display: inline-block;
						margin: 10upx 0;
					}
				}
			}
			.right {
				width: 174upx;
				height: 112upx;
				background: #38CB97;
				border-radius: 8upx;
				color: #FFFFFF;
				font-size: 30upx;
				text-align: center;
				line-height: 112upx;
			}
		}
	}
	.uploadBox{
		position: relative;
		margin-top: 450rpx;
		image{
			width: 136upx;
			height: 136upx;
			display: block;
			margin: 0 auto;
		}
		text{
			display: table;
			margin: 25upx auto 0;
			width: 154upx;
			height: 50upx;
			background: #05C6AD;
			border-radius: 26upx;
			color: #FFFFFF;
			font-size: 30upx;
			text-align: center;
			line-height: 50upx;
		}
	}
	.flex{
		display: flex;
		font-size: 30rpx;
		uni-picker{
			flex:1;
		}
		.date{
			height: 50upx;
			padding-left: 10upx;
			border: 1upx solid #E4E4E4;
			border-radius: 6upx;
		}
	}
</style>
